<template>
  <div class="app">
    <h2>我是App组件</h2>
    <Suspense>
      <template v-slot:default>
        <Child/>
      </template>
      <!-- <template v-slot:fallback> -->
        <!-- <h2>加载中......</h2> -->
      <!-- </template> -->
      <template v-slot:fallback>
            <h3>加载中.......</h3>
          </template>
    </Suspense>
  </div>
</template>

<script lang="ts" setup name="App">
import {Suspense} from 'vue'
 import Child from "./Child.vue";

/*
-  等待异步组件时渲染一些额外内容，让应用有更好的用户体验 
-  使用步骤： 
   -  异步引入组件
   -  使用`Suspense`包裹组件，并配置好`default` 与 `fallback`
   import { defineAsyncComponent,Suspense } from "vue";
const Child = defineAsyncComponent(()=>import('./Child.vue'))
*/

</script>

<style>
  .outer{
    background-color: #ddd;
    border-radius: 10px;
    padding: 5px;
    box-shadow: 0 0 10px;
    width: 400px;
    height: 400px;
    filter: saturate(200%);
  }
  img {
    width: 270px;
  }
</style>